/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form, Input, Radio, Select, Alert, DatePicker,InputNumber  } from 'antd';
import {connect} from 'dva';
import moment from 'moment'
import request from '@/utils/request';
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type:'1',
      distributors:[],
      value: [],
      data: '',
      jsonStatus: 'success'
    };
  }

  componentDidMount() {
  }
  handleChange = () => {
    try {
      this.setState({
        jsonStatus: 'success',
        data: this.editor.get()
      })
    } catch (e) {
      // HACK! This should propagate the error somehow
      // console.error(e);
      this.setState({
        jsonStatus: 'error',
      })
    }
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 18},
      }
    };

    const {getFieldDecorator} = this.props.form;
    const that=this
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               设备ID
            </span>
            )}
          >
            {getFieldDecorator('device_id', {
              initialValue: '',
              rules: [{ required: true, message: '请输入设备ID' }],
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               类型
            </span>
            )}
          >
            {getFieldDecorator('type', {
              initialValue: '1',
              rules: [{ required: true, message: '请选择类型' }],
            })(
              <RadioGroup onChange={(e)=>{
                console.log(e)
                this.setState({
                  type:e.target.value
                },function() {
                  if(this.state.type==='2'){
                    const container = document.getElementById('jsoneditor');
                    const options = {
                      mode: 'code',
                      modes: ['code', 'text'], // allowed modes
                      onChange: that.handleChange,
                      onError: function (err) {
                      },
                      onModeChange: function (newMode, oldMode) {
                        console.log('Mode switched from', oldMode, 'to', newMode);
                      }
                    };
                    this.editor = new window.JSONEditor(container, options, this.state.data);
                  }
                })
              }}>
                <Radio value="1">读</Radio>
                <Radio value="2">写</Radio>
                <Radio value="3">执行</Radio>
              </RadioGroup>
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               对象ID
            </span>
            )}
          >
            {getFieldDecorator('object_id', {
              initialValue: '',
              rules: [{ required: true, message: '请输入对象ID' }],
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               实例iID
            </span>
            )}
          >
            {getFieldDecorator('instance_id', {
              initialValue: '',
              rules: [{ required: (this.state.type==='2'||this.state.type==='3')?true:false, message: '请输入实例ID' }],
            })(
              <Input />
            )}
          </FormItem>
          {
            (this.state.type==='1'||this.state.type==='3')&&
              <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               资源ID
            </span>
                )}
              >
                {getFieldDecorator('resource_id', {
                  initialValue: '',
                  rules: [{ required: (this.state.type==='3')?true:false, message: '请输入资源ID' }],

                })(
                  <Input />
                )}
              </FormItem>
          }
          <FormItem
            {...formItemLayoutWithLabel}
            extra="单位：秒，范围为5-40"
            label={(
              <span>
               超时时间
            </span>
            )}
          >
            {getFieldDecorator('timeouts', {
              initialValue: 25,
            })(
              <InputNumber min={5}  max={40}

                           style={{width:'100%'}}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            extra="范围为0-10"
            label={(
              <span>
               重试次数
            </span>
            )}
          >
            {getFieldDecorator('retry', {
              initialValue: 3,
            })(
              <InputNumber min={0}  max={10}

                           style={{width:'100%'}}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
                生效时间
              </span>
            )}
          >
            {getFieldDecorator('valid_at', {
              initialValue:  moment(new Date(),"YYYY-MM-DD HH:mm:ss"),
              rules: [{ required: true, message: '请选择生效时间' }],
            })(
              <DatePicker showTime style={{width:'100%'}}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
                过期时间
              </span>
            )}
          >
            {getFieldDecorator('expire_at', {
              initialValue:  moment(new Date(),"YYYY-MM-DD HH:mm:ss"),
              rules: [{ required: true, message: '请选择生效时间' }],
            })(
              <DatePicker showTime style={{width:'100%'}}/>
            )}
          </FormItem>
          {
            this.state.type==='3'&&
            <FormItem
              {...formItemLayoutWithLabel}
              label={(
                <span>
               内容
            </span>
              )}
            >
              {getFieldDecorator('content', {
                initialValue: '',
                rules: [{ required: true, message: '请输入内容' }],
              })(
                <TextArea rows={4} />,
              )}
            </FormItem>
          }
          {
            this.state.type==='2'&&
            <Form.Item
              {...formItemLayoutWithLabel}
              label="内容">
              <Alert message="请输入正确的JSON字符串" type={this.state.jsonStatus}/>
              <div
                id='jsoneditor'
                ref={(ref) => {
                  this.editorRef = ref;
                }}
                style={{height: '200px', width: '100%'}}
              />
            </Form.Item>
          }

        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


